It’s happened to every web designer at least once, and it’s a question we receive quite often:

Why are my images broken?

We’re going to cover the most common causes below, as well as some tips specific for ShopSite.

Where does your browser think the image is?

The first step to track down the cause is to find out where you’re trying to load the missing image from.  If you edited your HTML code manually you may already know the path and the filename it’s trying to use, but if you’re not sure where it should be then it’s not too hard to track down.

An image missing in Internet Explorer

One method is to view the source code of your page and search for the filename, but a faster method may be available by right-clicking on the broken image and selecting an option off the pop-up window.  For example, in Firefox you can select “View Image Info” or in Internet Explorer you can right-click on the image and select “Properties”.

Both options will show you the Address or URL to the image, which will look something like this:

https://www.lexiconn.com/media/noimage.jpg

It’s Missing | Wrong Folder | CapITaliZatiOn

The most common reason for the broken image, is that it’s not where your browser is trying to load it from.  Now that you know the path, use FTP (or SSH, a web-based file manager, or any method you prefer to access your files) and check to see if the file is there.

Make sure you access the exact folder, which in our case is the “media” folder, to look for the image.

• TIP: With many web hosts you must go into a “www” folder (or similar) when you connect with FTP before you will get to your website files.  This is normal and is not part of the URL.

If it’s nowhere to be found you can re-upload it to your website, or if it’s in the wrong folder you can either move it where you want it to be, or adjust your code to load it from the correct location.

Capitalization is key.  Your computer may not care if an image is named RedWagon.jpg or redwagon.jpg, but your web server most likely will.  Ensure that the capitalization that your code is using for your file name and the folder name match exactly what shows on the server.

• TIP: Watch out for an extra space character at the beginning or end of a filename.  If everything looks fine but the image still doesn’t load, edit the filename and check for spaces.  Or just rename the file which will clear any hidden spaces that are not obvious.

Once your code is loading the file with the exact path and filename shown on the server, you should be all set.  However, if you are using ShopSite to resize your images there may be a couple more settings for you to check:

ShopSite Setting & Tips

File Permissions
When ShopSite resizes your images it must have access to create its resized folders and place the new images into them.  If you created a folder and uploaded images into it with FTP you will need to set the permissions on that folder to 777.  That will allow both your FTP user and ShopSite to access the files.

File Types
Be careful when you save your images – you always want to make sure that the file extension you use is correct for the image type.  For example, if you are saving a file as a JPG, be sure the filename ends in “.jpg”.  If you accidentally give it a name ending in “.gif” (another popular file type) then ShopSite will not be able to resize it.

Reset Attributes
On the ShopSite Images tool (available on the main ShopSite menu) select the image that’s not displaying and click the Reset Attributes button.  This will reset some internal settings for the image that ShopSite uses.  If the file had been previously renamed or moved this will allow ShopSite to publish it correctly.

Create Resized Images
After running the Reset Attributes option on your image, select it again and click the Create Resized Images button.  If you are using one of the resized versions of your image this will cause ShopSite to recreate them on the server.

Publish Your Site
The last step will be to publish your site to make sure the corrected paths and files are used on your pages.  This can be done on the Utilities > Publish screen by clicking Regenerate.

…

These may seem like a lot of steps to review when images are missing from your website, but over time items like checking paths and filenames will become second nature as you’re building pages and it will only take a few minutes to run the attributes/resize/publish steps in ShopSite to see if that resolves broken images.